/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  LockOutlined,
  MobileOutlined,
  AlipayOutlined,
  UserOutlined,
  GithubOutlined,
  WechatOutlined,
  SecurityScanOutlined,
} from '@ant-design/icons';
import { Alert, message, Tabs, Divider, Space, Col, Row, Card, Layout } from 'antd';
const { Header, Content, Footer } = Layout;
import React, { useState } from 'react';
import { ProFormCaptcha, ProFormCheckbox, ProFormText, LoginForm } from '@ant-design/pro-form';
import { useIntl, history, FormattedMessage, SelectLang, useModel } from '@umijs/max';
import { login, getCode } from '@/services/api/login';
// import { getFakeCaptcha } from '@/services/ant-design-pro/login';
import loginIcon from '@/assets/img/login_banner.svg';
// import { login } from '@/services/api/login';
import { setToken } from '@/utils/auth';
import logoIcon from '@/assets/img/logo.svg';

import styles from './index.less';

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);
const iconStyles = {
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};
const Login: React.FC = () => {
  const [userLoginState] = useState<API.LoginResult>({});
  const [type, setType] = useState<string>('account');
  const { initialState, setInitialState } = useModel('@@initialState');
  const [captchaCodeImg, setCaptchaCodeImg] = useState<string>('');
  const [captchaToken, setCaptchaToken] = useState<string>('');
  const intl = useIntl();
  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo?.();
    console.log(userInfo);
    if (userInfo) {
      await setInitialState((s: any) => ({
        ...s,
        currentUser: userInfo,
      }));
    }
  };
  // 获取验证码
  const getCaptchaCode = async () => {
    await getCode().then((res: any) => {
      setCaptchaCodeImg(res.img);
      setCaptchaToken(res.uuid);
    });
  };
  React.useEffect(() => {
    // 页面初始化请求
    getCaptchaCode();
  }, []);

  // 处理提交
  const handleSubmit = async (values: API.ILoginParam) => {
    return login(values)
      .then(async (res) => {
        console.log(res);
        const { msg, data }: any = res;
        // TOKEN 放入cookie
        setToken(data['access_token']);
        message.success(msg);
        await fetchUserInfo();
        if (!history) return Promise.resolve(true);
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        return;
        /** 此方法会跳转到 redirect 参数所在的位置 */
        // const { query } = history.location;
        // const { redirect } = query as { redirect: string };
        // history.push(redirect || '/');
        // return Promise.resolve(true);
      })
      .catch(() => {
        getCaptchaCode();
        return Promise.reject(false);
      });
  };
  const { status, type: loginType } = userLoginState;

  return (
    <Layout className={styles.container}>
      <Header className={styles.header}>
        <div className={styles.logo}>
          <img src={logoIcon} width="40" />
          <h1 className={styles.title}>Gollum Micro Service</h1>
        </div>
        {SelectLang && <SelectLang />}
      </Header>
      <div className={styles.content}>
        <div className={styles.left}>
          {/* <img className={styles.loginIcon} width="1000" src={loginIcon} /> */}
        </div>
        <div className={styles.right}>
          <div className={styles.card}>
            <div className={styles.loginForm}>
              <div>
                <LoginForm
                  initialValues={{
                    autoLogin: true,
                  }}
                  // style={{ width: '440px' }}
                  onFinish={async (values) => {
                    values.token = captchaToken;
                    await handleSubmit(values as API.ILoginParam);
                    return true;
                  }}
                >
                  <Tabs size={'large'} activeKey={type} onChange={setType}>
                    <Tabs.TabPane
                      key="account"
                      tab={intl.formatMessage({
                        id: 'pages.login.accountLogin.tab',
                        defaultMessage: '账户密码登录',
                      })}
                    />
                    <Tabs.TabPane
                      key="mobile"
                      tab={intl.formatMessage({
                        id: 'pages.login.phoneLogin.tab',
                        defaultMessage: '手机号登录',
                      })}
                    />
                  </Tabs>
                  {status === 'error' && loginType === 'account' && (
                    <LoginMessage
                      content={intl.formatMessage({
                        id: 'pages.login.accountLogin.errorMessage',
                        defaultMessage: '账户或密码错误(admin/ant.design)',
                      })}
                    />
                  )}
                  {type === 'account' && (
                    <>
                      <ProFormText
                        name="username"
                        initialValue="Herther"
                        fieldProps={{
                          size: 'large',
                          prefix: <UserOutlined className={styles.prefixIcon} />,
                        }}
                        placeholder={intl.formatMessage({
                          id: 'pages.login.username.placeholder',
                          defaultMessage: '用户名: admin or user',
                        })}
                        rules={[
                          {
                            required: true,
                            message: (
                              <FormattedMessage
                                id="pages.login.username.required"
                                defaultMessage="请输入用户名!"
                              />
                            ),
                          },
                        ]}
                      />
                      <ProFormText.Password
                        name="password"
                        initialValue="admin123"
                        fieldProps={{
                          size: 'large',
                          prefix: <LockOutlined className={styles.prefixIcon} />,
                        }}
                        placeholder={intl.formatMessage({
                          id: 'pages.login.password.placeholder',
                          defaultMessage: '密码: ant.design',
                        })}
                        rules={[
                          {
                            required: true,
                            message: (
                              <FormattedMessage
                                id="pages.login.password.required"
                                defaultMessage="请输入密码！"
                              />
                            ),
                          },
                        ]}
                      />
                      <div className={styles.captcha}>
                        <ProFormText
                          name="code"
                          width="sm"
                          fieldProps={{
                            size: 'large',
                            prefix: <SecurityScanOutlined className={styles.prefixIcon} />,
                          }}
                          placeholder={intl.formatMessage({
                            id: 'pages.login.captcha.placeholder',
                            defaultMessage: '验证码',
                          })}
                          rules={[
                            {
                              required: true,
                              message: (
                                <FormattedMessage
                                  id="pages.login.captcha.required"
                                  defaultMessage="请输入验证码!"
                                />
                              ),
                            },
                          ]}
                        />
                        <img
                          src={`data:image/png;base64,${captchaCodeImg}`}
                          onClick={() => getCaptchaCode()}
                        />
                      </div>
                    </>
                  )}
                  {status === 'error' && loginType === 'mobile' && (
                    <LoginMessage content="验证码错误" />
                  )}
                  {type === 'mobile' && (
                    <>
                      <ProFormText
                        fieldProps={{
                          size: 'large',
                          prefix: <MobileOutlined className={styles.prefixIcon} />,
                        }}
                        name="mobile"
                        placeholder={intl.formatMessage({
                          id: 'pages.login.phoneNumber.placeholder',
                          defaultMessage: '手机号',
                        })}
                        rules={[
                          {
                            required: true,
                            message: (
                              <FormattedMessage
                                id="pages.login.phoneNumber.required"
                                defaultMessage="请输入手机号！"
                              />
                            ),
                          },
                          {
                            pattern: /^1\d{10}$/,
                            message: (
                              <FormattedMessage
                                id="pages.login.phoneNumber.invalid"
                                defaultMessage="手机号格式错误！"
                              />
                            ),
                          },
                        ]}
                      />
                      <ProFormCaptcha
                        fieldProps={{
                          size: 'large',
                          prefix: <LockOutlined className={styles.prefixIcon} />,
                        }}
                        captchaProps={{
                          size: 'large',
                        }}
                        placeholder={intl.formatMessage({
                          id: 'pages.login.captcha.placeholder',
                          defaultMessage: '请输入验证码',
                        })}
                        captchaTextRender={(timing, count) => {
                          if (timing) {
                            return `${count} ${intl.formatMessage({
                              id: 'pages.getCaptchaSecondText',
                              defaultMessage: '获取验证码',
                            })}`;
                          }
                          return intl.formatMessage({
                            id: 'pages.login.phoneLogin.getVerificationCode',
                            defaultMessage: '获取验证码',
                          });
                        }}
                        name="captcha"
                        rules={[
                          {
                            required: true,
                            message: (
                              <FormattedMessage
                                id="pages.login.captcha.required"
                                defaultMessage="请输入验证码！"
                              />
                            ),
                          },
                        ]}
                        onGetCaptcha={async (phone) => {
                          // // const result = await getFakeCaptcha({
                          // //   phone,
                          // // });
                          // if (result === false) {
                          //   return;
                          // }
                          message.success('获取验证码成功！验证码为：1234');
                        }}
                      />
                    </>
                  )}
                  <div
                    style={{
                      marginBlockEnd: 24,
                    }}
                  >
                    <ProFormCheckbox noStyle name="autoLogin">
                      {intl.formatMessage({
                        id: 'login.auto.login',
                        defaultMessage: '自动登录',
                      })}
                    </ProFormCheckbox>
                    <a
                      style={{
                        float: 'right',
                      }}
                    >
                      {intl.formatMessage({
                        id: 'login.forget.password',
                        defaultMessage: '忘记密码',
                      })}
                    </a>
                  </div>
                </LoginForm>
              </div>
              <div>
                <Divider plain>
                  <span style={{ color: '#CCC', fontWeight: 'normal', fontSize: 14 }}>
                    {intl.formatMessage({
                      id: 'login.other.ways.login',
                      defaultMessage: '其他登录方式',
                    })}
                  </span>
                </Divider>
                <Space>
                  <Space align="center" size={24}>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexDirection: 'column',
                        height: 40,
                        width: 40,
                        border: '1px solid #D4D8DD',
                        borderRadius: '50%',
                      }}
                    >
                      <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexDirection: 'column',
                        height: 40,
                        width: 40,
                        border: '1px solid #D4D8DD',
                        borderRadius: '50%',
                      }}
                    >
                      <GithubOutlined style={{ ...iconStyles, color: '#00000' }} />
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexDirection: 'column',
                        height: 40,
                        width: 40,
                        border: '1px solid #D4D8DD',
                        borderRadius: '50%',
                      }}
                    >
                      <WechatOutlined style={{ ...iconStyles, color: '#04c15f' }} />
                    </div>
                  </Space>
                </Space>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer className={styles.footer}>
        {intl.formatMessage({
          id: 'app.copyright.produced',
          defaultMessage: 'Gollum-微服务 & Gollum 闽ICP备2021003096号-1',
        })}
      </Footer>
    </Layout>
    // <div>
    //   <div>
    //     <div>
    //       <div>
    //         {/* <div className={styles.logoContainer}>logo</div> */}
    //         {/* <div className={styles.iconContainer}> */}
    //           {/* <img className={styles.loginIcon} width="800" src={loginIcon} /> */}
    //           {/* <div className={styles.text}> */}
    //             {/* <h1 className={styles.title}>Gollum Micro Service</h1> */}
    //             {/* <p className={styles.desc}>开源中台系统</p> */}
    //           {/* </div> */}
    //         </div>
    //       </div>
    //     </div>
    //     <div className={styles.right}>
    //       {/* <div className={styles.lang} data-lang>
    //         {SelectLang && <SelectLang />}
    //       </div>
    //       <div className={styles.loginForm}>
    //         <h1 className={styles.title}>Gollum Micro Service</h1>
    //         <div>
    //           <LoginForm
    //             initialValues={{
    //               autoLogin: true,
    //             }}
    //             style={{ width: '440px' }}
    //             onFinish={async (values) => {
    //               values.token = captchaToken;
    //               await handleSubmit(values as API.ILoginParam);
    //               return true;
    //             }}
    //           >
    //             <Tabs size={'large'} activeKey={type} onChange={setType}>
    //               <Tabs.TabPane
    //                 key="account"
    //                 tab={intl.formatMessage({
    //                   id: 'pages.login.accountLogin.tab',
    //                   defaultMessage: '账户密码登录',
    //                 })}
    //               />
    //               <Tabs.TabPane
    //                 key="mobile"
    //                 tab={intl.formatMessage({
    //                   id: 'pages.login.phoneLogin.tab',
    //                   defaultMessage: '手机号登录',
    //                 })}
    //               />
    //             </Tabs>
    //             {status === 'error' && loginType === 'account' && (
    //               <LoginMessage
    //                 content={intl.formatMessage({
    //                   id: 'pages.login.accountLogin.errorMessage',
    //                   defaultMessage: '账户或密码错误(admin/ant.design)',
    //                 })}
    //               />
    //             )}
    //             {type === 'account' && (
    //               <>
    //                 <ProFormText
    //                   name="username"
    //                   initialValue="Herther"
    //                   fieldProps={{
    //                     size: 'large',
    //                     prefix: <UserOutlined className={styles.prefixIcon} />,
    //                   }}
    //                   placeholder={intl.formatMessage({
    //                     id: 'pages.login.username.placeholder',
    //                     defaultMessage: '用户名: admin or user',
    //                   })}
    //                   rules={[
    //                     {
    //                       required: true,
    //                       message: (
    //                         <FormattedMessage
    //                           id="pages.login.username.required"
    //                           defaultMessage="请输入用户名!"
    //                         />
    //                       ),
    //                     },
    //                   ]}
    //                 />
    //                 <ProFormText.Password
    //                   name="password"
    //                   initialValue="admin123"
    //                   fieldProps={{
    //                     size: 'large',
    //                     prefix: <LockOutlined className={styles.prefixIcon} />,
    //                   }}
    //                   placeholder={intl.formatMessage({
    //                     id: 'pages.login.password.placeholder',
    //                     defaultMessage: '密码: ant.design',
    //                   })}
    //                   rules={[
    //                     {
    //                       required: true,
    //                       message: (
    //                         <FormattedMessage
    //                           id="pages.login.password.required"
    //                           defaultMessage="请输入密码！"
    //                         />
    //                       ),
    //                     },
    //                   ]}
    //                 />
    //                 <div className={styles.captcha}>
    //                   <ProFormText
    //                     name="code"
    //                     width="md"
    //                     fieldProps={{
    //                       size: 'large',
    //                       prefix: <SecurityScanOutlined className={styles.prefixIcon} />,
    //                     }}
    //                     placeholder={intl.formatMessage({
    //                       id: 'pages.login.captcha.placeholder',
    //                       defaultMessage: '验证码',
    //                     })}
    //                     rules={[
    //                       {
    //                         required: true,
    //                         message: (
    //                           <FormattedMessage
    //                             id="pages.login.captcha.required"
    //                             defaultMessage="请输入验证码!"
    //                           />
    //                         ),
    //                       },
    //                     ]}
    //                   />
    //                   <img src={`data:image/png;base64,${captchaCodeImg}`} onClick={()=> getCaptchaCode()} />
    //                 </div>

    //               </>
    //             )}
    //             {status === 'error' && loginType === 'mobile' && (
    //               <LoginMessage content="验证码错误" />
    //             )}
    //             {type === 'mobile' && (
    //               <>
    //                 <ProFormText
    //                   fieldProps={{
    //                     size: 'large',
    //                     prefix: <MobileOutlined className={styles.prefixIcon} />,
    //                   }}
    //                   name="mobile"
    //                   placeholder={intl.formatMessage({
    //                     id: 'pages.login.phoneNumber.placeholder',
    //                     defaultMessage: '手机号',
    //                   })}
    //                   rules={[
    //                     {
    //                       required: true,
    //                       message: (
    //                         <FormattedMessage
    //                           id="pages.login.phoneNumber.required"
    //                           defaultMessage="请输入手机号！"
    //                         />
    //                       ),
    //                     },
    //                     {
    //                       pattern: /^1\d{10}$/,
    //                       message: (
    //                         <FormattedMessage
    //                           id="pages.login.phoneNumber.invalid"
    //                           defaultMessage="手机号格式错误！"
    //                         />
    //                       ),
    //                     },
    //                   ]}
    //                 />
    //                 <ProFormCaptcha
    //                   fieldProps={{
    //                     size: 'large',
    //                     prefix: <LockOutlined className={styles.prefixIcon} />,
    //                   }}
    //                   captchaProps={{
    //                     size: 'large',
    //                   }}
    //                   placeholder={intl.formatMessage({
    //                     id: 'pages.login.captcha.placeholder',
    //                     defaultMessage: '请输入验证码',
    //                   })}
    //                   captchaTextRender={(timing, count) => {
    //                     if (timing) {
    //                       return `${count} ${intl.formatMessage({
    //                         id: 'pages.getCaptchaSecondText',
    //                         defaultMessage: '获取验证码',
    //                       })}`;
    //                     }
    //                     return intl.formatMessage({
    //                       id: 'pages.login.phoneLogin.getVerificationCode',
    //                       defaultMessage: '获取验证码',
    //                     });
    //                   }}
    //                   name="captcha"
    //                   rules={[
    //                     {
    //                       required: true,
    //                       message: (
    //                         <FormattedMessage
    //                           id="pages.login.captcha.required"
    //                           defaultMessage="请输入验证码！"
    //                         />
    //                       ),
    //                     },
    //                   ]}
    //                   onGetCaptcha={async (phone) => {
    //                     // // const result = await getFakeCaptcha({
    //                     // //   phone,
    //                     // // });
    //                     // if (result === false) {
    //                     //   return;
    //                     // }
    //                     message.success('获取验证码成功！验证码为：1234');
    //                   }}
    //                 />
    //               </>
    //             )}
    //             <div
    //               style={{
    //                 marginBlockEnd: 24,
    //               }}
    //             >
    //               <ProFormCheckbox noStyle name="autoLogin">
    //                 {intl.formatMessage({
    //                   id: 'login.auto.login',
    //                   defaultMessage: '自动登录',
    //                 })}
    //               </ProFormCheckbox>
    //               <a
    //                 style={{
    //                   float: 'right',
    //                 }}
    //               >
    //                 {intl.formatMessage({
    //                   id: 'login.forget.password',
    //                   defaultMessage: '忘记密码',
    //                 })}
    //               </a>
    //             </div>
    //           </LoginForm>
    //         </div>
    //         <div>
    //           <Divider plain>
    //             <span style={{ color: '#CCC', fontWeight: 'normal', fontSize: 14 }}>
    //               {intl.formatMessage({
    //                 id: 'login.other.ways.login',
    //                 defaultMessage: '其他登录方式',
    //               })}
    //             </span>
    //           </Divider>
    //           <Space>
    //             <Space align="center" size={24}>
    //               <div
    //                 style={{
    //                   display: 'flex',
    //                   justifyContent: 'center',
    //                   alignItems: 'center',
    //                   flexDirection: 'column',
    //                   height: 40,
    //                   width: 40,
    //                   border: '1px solid #D4D8DD',
    //                   borderRadius: '50%',
    //                 }}
    //               >
    //                 <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
    //               </div>
    //               <div
    //                 style={{
    //                   display: 'flex',
    //                   justifyContent: 'center',
    //                   alignItems: 'center',
    //                   flexDirection: 'column',
    //                   height: 40,
    //                   width: 40,
    //                   border: '1px solid #D4D8DD',
    //                   borderRadius: '50%',
    //                 }}
    //               >
    //                 <GithubOutlined style={{ ...iconStyles, color: '#00000' }} />
    //               </div>
    //               <div
    //                 style={{
    //                   display: 'flex',
    //                   justifyContent: 'center',
    //                   alignItems: 'center',
    //                   flexDirection: 'column',
    //                   height: 40,
    //                   width: 40,
    //                   border: '1px solid #D4D8DD',
    //                   borderRadius: '50%',
    //                 }}
    //               >
    //                 <WechatOutlined style={{ ...iconStyles, color: '#04c15f' }} />
    //               </div>
    //             </Space>
    //           </Space>
    //         </div>
    //       </div> */}
    //     </div>
    //   </div>
    // </div>
  );
};
export default Login;
